<template>
    <!-- 返回路径 -->
    <van-nav-bar title="送心意" left-text="" left-arrow @click="onClickLeft" />
    <div class="doc-detail">
        <img :src="item.image" alt="" style="border-radius: 50%;width: 80px;height: 80px;" class="doc-img">
        <p class="doc-name">{{ item.name }}</p>
        <img src="../../assets//thank.jpg" alt="" class="doc-imgs">
    </div>
    <div class="doc-text">
        <!-- 选择金额 -->
        <p class="doc-price">请选择答题金额</p>

        <div class="thanks">
            <div class="money">
            <!-- 循环遍历 -->
                <div v-for="(amount, index) in amountOptions" :key="index" class="amount-option"
                    :class="{ selected: selectedAmount === amount }" @click="selectAmount(amount)">
                    <span class="element">{{ amount }}元</span>
                </div>
                <div @click="showCenter" class="element">更多金额</div>
                <van-popup v-model:show="show" :style="{ width: '90%', height: '50%' }">
                    <input type="text" placeholder="请输入答谢金额(37-288元)" style="position: absolute;width: 80%;left: -2%;height: 30px;"><span style="color: red;position: absolute;right: 5px;;">超出范围</span>
                    <img src="../../assets//qizhi.jpg" alt=""  @click="show = true" style="width: 50%;height: 50%;position: absolute;top: 60px;left: 70px;">
                    <button style="position: absolute;bottom: 25px;left: 20px;width: 150px;height: 40px;background-color: white;color: #000;
                    border: 1px solid #ccc;">取消</button> <button style="position: absolute;bottom: 25px;right: 30px;width: 150px;height: 40px;background-color: #39d167;color: white;
                    border: none;outline: none;">确定</button>
                </van-popup>
            </div>
            <div class="p2">
                <p v-for="(label, index) in amountLabels" :key="index">
                    {{ label }}
                </p>
            </div>
            <div class="ping">
                <textarea v-model="message" placeholder="说几句感谢医生的话" class="inp"></textarea>
                <button @click="complete" class="complete">完成</button>
                <p class="text">答谢金会全部转入该医生的账户，并且医生会看到您的留言</p>
            </div>
        </div>
        <div class="content">

        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="(item, index) in list" :key="index" class="list"
                    style="width: 110%;border-top: 1px solid #e8e8e8;  ">
                    <!-- 图片 -->
                    <div style="float: left; width: 22%;height:90px;">
                    </div>
                    <!-- 内容 -->
                    <div class="right" style=" float: left;margin-left: 2%; width: 70%;height: 100%;">
                        <div class="mock"
                            style="float: left; width: 86%;;margin-left: -32%; text-align:left;white-space: pre-wrap;font-size: 16px;;color: black;">
                            {{ item.title }}
                        </div>
                        <!-- 渲染金额 -->
                        <div class="button" style="float: left; margin-left: 2%;margin-top: 10%; width: 100%;">
                            <div style="width:50%;float: left;margin-left: 24px;">
                                <img src="../../assets//xin.jpg" alt="" style="width: 20px;height: 20px;position: absolute;top: 10px;right: 120PX;"><span style="float: left;position: absolute;top: 10px;right: 80PX;color: red;">{{ (item.news_id * 0.001).toFixed(0) }}元</span>
                            </div>

                        </div>

                    </div>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const loading = ref(false);
import http from '@/http/axios'
const pageCode = ref(0)
const finished = ref(false)
const refreshing = ref(false)
const show = ref(false)
const list = ref<any>([])
// 弹出层开启
const showCenter = () => {
    show.value = true
}
//上啦加载
const onRefresh = () => {
    // 清空列表数据
    finished.value = false;
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad()
};
// 心意墙数据（模拟）
async function GetList() {
    const resp = await http.get('/static/cooperation/wap/health_news/', {
        params: {
            from_wx_mini: '1',
            page: pageCode.value,
            partner: 'chunyu_wap_mini',
            release_time: '2020-04-22',
            channel_id: '0'
        }
    })
    console.log(resp.data.content_list);
    list.value = [...list.value, ...resp.data.content_list]

}
GetList()
//  加载更多数据

const onLoad = () => {
    pageCode.value++
    GetList()
    setTimeout(() => {
        // 加载状态结束
        loading.value = false;
    }, 1500);
};
const amountLabels = ['一点心意', '白衣天使', '医德高尚', '德医双馨', '妙手仁心']
const selectedAmount = ref<number | null>(null)
const showMoreOptions = ref<boolean>(false)
const customAmount = ref<any>(null)
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const item = JSON.parse(route.query.item)
console.log(item);
const onClickLeft = () => {
    router.go(-1)
}
const selectAmount = (amount: number) => {
    if (amount) {
        selectedAmount.value = amount
        showMoreOptions.value = false
        // 更新感谢留言
        const label = amountLabels[amountOptions.indexOf(amount)]
        message.value = label
    }
}

const amountOptions = [2, 8, 12, 36]
// 感谢留言
const message = ref<string>('')
const complete = () => {
    if (selectedAmount.value && message.value) {
        list.value.push({
            user: '春雨用户',
            amount: selectedAmount.value,
            message: message.value
        })
        selectedAmount.value = null
        message.value = ''
    }
}
</script>

<style lang="scss" scoped>
.doc-detail {
    width: 100%;
    height: 200px;
    position: relative;
    border-bottom: 1px solid #ccc;

    .doc-img {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .doc-name {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .doc-imgs {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.doc-text {
    width: 100%;
    height: 200px;

    .doc-price {
        line-height: 50px;
        text-align: center;
    }
}

.thanks {
    width: 100%;
    height: 300px;

    // 选择答谢金额
    .jin {
        text-align: center;
        width: 100%;
        height: 50px;
        line-height: 50px;
    }

    .money {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;

        // 金额选项
        .element {
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            border-radius: 30px;
            text-align: center;
            border: 1px solid #39d167;
            font-size: 14px;
        }

        // 金额选项
        .amount-option {
            border-radius: 30px;
            cursor: pointer;
            text-align: center;
        }

        // 金额选项选中
        .amount-option.selected {
            background-color: #39d167;
            color: #fff;
        }
    }

    // 标签
    .p2 {
        display: flex;
        justify-content: space-around;
    }

    // 留言
    .ping {
        width: 95%;
        height: 100px;
        border: 1px solid #ccc;
        margin-top: 10px;
        margin-left: 10px;

        // 输入框
        .inp {
            width: 100%;
            height: 100%;
            outline: none;
            border: 0;
        }

        // 完成按钮
        .complete {
            width: 95%;
            margin-left: 10px;
            height: 50px;
            border-radius: 5px;
            background: #39d167;
            border: 0;
            outline: none;
            color: #fff;
            margin-top: 10px;
        }

        .text {
            color: #ccc;
            font-size: 13px;
            margin-left: 10px;
        }
    }
}

.wish {
    p {
        width: 100%;
        height: 60px;
        background-color: white;
        border-bottom: 1px solid #ccc;
        line-height: 60px;

    }
}

.content {
    height: 20px;
    background-color: #f1f1f1;
}
</style>